<template>
  <view>
    <view class="content">
      <u-gap height="20" bg-color="#F2F2F2"></u-gap>
      <view class="address-window">
        <!-- 无地址 -->
        <view class="list">
          <u-row
            gutter="10"
            v-for="(item, index) in courselist"
            :key="index"
            @click="tapCourse(index, item)"
            class="item acea-row row-between-wrapper"
          >
            <u-col span="10">
              <view class="address u-padding-left-30">
                <view class="name" :class="active == index ? 'font-color' : ''">{{
                  item.name
                }}</view>
              </view>
            </u-col>
            <u-col span="2" text-align="center">
              <u-icon
                name="checkbox-mark"
                color="#fc4141"
                size="28"
                v-if="item.checked"
              ></u-icon>
            </u-col>
          </u-row>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["list", "multiple"],
  computed: {},
  data() {
    return {
      background: "#fff",
      active: null,
      courselist: [],
      courseid: [],
    };
  },
  methods: {
    tapCourse(index, item) {
      let that = this;
      if (!this.multiple) {
        that.courseid = [];
        for (let item of that.courselist) {
          item.checked = false;
        }
        that.courselist[index]["checked"] = !item.checked;
        that.courseid.push(item.name);
      } else {
        that.courselist[index]["checked"] = !item.checked;
        if (item.checked) {
          that.courseid.push(item.name);
        } else {
          that.courseid.pop(item.name);
        }
      }
      this.$emit("input", this.courseid);
    },
  },
  mounted() {
    let arr = [];
    for (let item of this.list) {
      arr.push({
        name: item,
        checked: false,
      });
    }
    this.courselist = [...arr];
  },
};
</script>

<style>
.content {
  padding-top: 20rpx;
}
.btn-wrapper {
  margin: 0 auto;
  width: 50%;
}

.address-window.on {
  transform: translate3d(0, 0, 0);
}

.address-window .title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  height: 123rpx;
  line-height: 123rpx;
  position: relative;
}

.address-window .title .iconfont {
  position: absolute;
  right: 30rpx;
  color: #8a8a8a;
  font-size: 35rpx;
}

.address-window .list .item {
  margin-left: 30rpx;
  padding-right: 30rpx;
  border-bottom: 1px solid #eee;
  height: 129rpx;
  font-size: 25rpx;
  color: #333;
}

.address-window .list .item .iconfont {
  font-size: 37rpx;
  color: #2c2c2c;
}

.address-window .list .item .iconfont.icon-complete {
  font-size: 30rpx;
  color: #fff;
}

.address-window .list .item .address {
  width: 99%;
}
.address-window .list .item .address .name {
  font-size: 28rpx;
  font-weight: bold;
  color: #282828;
  margin-bottom: 4rpx;
}
.address-window .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 0 auto;
}

.address-window .pictrue image {
  width: 100%;
  height: 100%;
}
</style>
